<template>
  <div class="wodedingdan">
    <head_><h1>我的订单</h1></head_>
    <div class="dingdan_list">
      <ul v-for="(item,index) in list" :key="item.orderId" @click="go_detail(item.orderId)">
        <li><p><img :src="item.bigPic" alt="" /></p></li>
        <li>
          <p>
            <span v-text="item.carName"></span>
            <span v-if="item.orderStatus==1"><el-link type="primary" >预约中</el-link></span>
            <span v-if="item.orderStatus==2"><el-link type="success" >已下单</el-link></span>
            <span v-if="item.orderStatus==3"><el-link type="warning" >租赁中</el-link></span>
            <span v-if="item.orderStatus==4"><el-link type="info" >已完成</el-link></span>
            <span v-if="item.orderStatus==5"><el-link type="danger" >已取消</el-link></span>
          </p>
          <p>取车门店：{{ item.pickStore }}</p>
          <p>预约取车日期：{{ item.subscribePickTime }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {getMyOrder} from '../../request/order/order.js'
import head_ from "./header";
export default {
  props: {},
  data() {
    return {
      list: [],
    };
  },
  methods: {
      go_detail(orderId) {
          this.$router.push(`/xiangqing1/${JSON.stringify(orderId)}`);
      },

  },
  components: {
    head_,
  },
  mounted() {
      // 获取我的订单
      getMyOrder({
          "clientId":this.$store.state.user.id
      }).then( result => {
          this.list = result.listData;
      });
  }
};
</script>

<style scoped lang="less">
.wodedingdan {
  width: 100%;
  height: 100%;
  font-size: 0;
  .dingdan_list {
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
    padding: 0.1rem 0;
    ul {
      width: 95%;
      height: 1.8rem;
      background: white;
      margin: 0.2rem auto;
      border-radius: 0.08rem;
      display: flex;
      align-items: center;
      li {
        height: 90%;
      }
      li:nth-child(1) {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 2.2rem;
          height: 1.3rem;
          margin-left: 0.1rem;
        }
      }
      li:nth-child(2) {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        p {
          padding: 0 0.21rem;
        }
        p:nth-child(1) {
          display: flex;
          justify-content: space-between;
          span:nth-child(1) {
            font-weight: 600;
            font-size: 0.28rem;
          }
          span:nth-child(2) {
            color: #999;
            font-size: 0.24rem;
          }
        }
        p:nth-child(2),
        p:nth-child(3) {
          font-size: 0.23rem;
          color: #666;
        }
      }
    }
  }
}
</style>
